<template>
  <div class="schedule">
    <schedule-layout-side />
    <div class="flex-column w100">
      <schedule-layout-nav @add="handleShow" />
      <schedule-layout-title />
      <n-scrollbar style="max-height: calc(100vh - 175px)">
        <component :is="modeMain" />
      </n-scrollbar>
    </div>
  </div>
  <add-form v-model:visible="addVisible" />
  <edit-form v-model:visible="editVisible" />
</template>

<script lang="ts" setup>
  import AddForm from './AddForm.vue'
  import EditForm from './EditForm.vue'
  const scheduleStore = useSchedule()
  const { type } = storeToRefs(scheduleStore)

  // 添加显示
  const addVisible = ref(false)
  // 修改显示
  const editVisible = ref(false)

  // 模式列表
  const modeList = [
    {
      name: 'day',
      component: resolveComponent('ScheduleModeDay')
    },
    {
      name: 'week',
      component: resolveComponent('ScheduleModeWeek')
    },
    {
      name: 'month',
      component: resolveComponent('ScheduleModeMonth')
    }
  ]

  // 添加日程
  const handleShow = () => {
    addVisible.value = true
  }

  const modeMain = computed(() => {
    return modeList.find(item => item.name === type.value)?.component
  })
</script>

<style scoped lang="scss">
  .schedule {
    display: flex;
    height: 100%;
    width: 100%;
  }
</style>
